加载过慢请开启缓存(浏览器默认开启)
生命周期：
1.又名生命周期回调函数、生命周期函数、生命周期钩子
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
4.生命周期函数中的this指向是vm或组件实例对象
常用的生命周期钩子：
1.mounted:发送ajax请求，启动定时器，绑定自定义事件，订阅消息等（初始化操作）
2.beforeDestory:清楚定时器，解绑自定义事件，取消订阅消息等（收尾工作）
关于销毁Vue实例：
1.销毁后借助Vue开发者工具看不到任何消息
2.销毁后自定义事件会失效，但原生DOM事件依然有效（如console.log）
3.一般不会在beforeDestory操作数据，因为即使操作数据，也不会触发更新流程了
放两张天禹老师的ppt
自定义指令调用的时机：
1.指令与元素成功绑定时
2.指令所在的模板被重新解析时
定义语法：
1.局部指令：
directives:{ 指令名：配置对象 } 或 directives:{ 指令名：回调函数 }
2.全局指令：
Vue.directive(‘指令名’，配置对象) 或 Vue.directive(‘指令名’，回调函数)
配置对象中常用的三个回调：
1.bind:指令与元素成功绑定时调用。
2.inserted:指令所在元素被插入页面时调用
3.update:指令所在模板结构被重新解析时调用
备注：
1.指令定义时不加v-,但使用时要加v-
2.指令名如果是多个单词，要使用kebab-case命名（如user-name），不要用camelCase命名（userName）
一个实际应用案例：elementui 远程搜索，下拉加载更多，通过懒加载实现，添加去抖减少消耗
遇到的问题：因为远程搜索可能有选中的项，比如选中的项是第十三条，但是懒加载首次只加载了十条数据，这样一来选中的项无法展示出来，展现出来的是没有文字的框。我解决的方法是，将选中的项从数组中提取出来，添加到首次加载的数组里前面，这样点开远程搜索，上方展示的就是已经选中的内容。对剩下的数组进行遍历，如果数组中的内容含有选中项，已经加载过了，那么将这项从数组中删除，然后将数组添加到加载出来的数组中，可能比较麻烦，但是是我能想出来的唯一办法了，但是公司需求改了，代码被删了，上方是远程搜索的代码。
v-text:
1.作用：向其所在的节点中渲染文本内容
2.与插值语法的区别：v-text会替换掉节点中的内容，则不会
v-html:
1.作用：向指定节点中渲染包含html结构的内容
2.与插值语法的区别：v-html会替换掉节点中的内容，则不会
3.注意点：v-html有安全性问题
在网站上动态渲染任意的HTML是非常危险的，容易导致XSS攻击
一定要在可信的内容上使用v-html，永远不要在用户提交的内容上
v-cloak(没有值):
1.v-cloak本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出的问题
3.配合属性选择器使用：[v-cloak]{ display:none; }
v-once(没有值):
1.v-once所在的节点在初次动态渲染后，就视为静态内容了（只在初始化时渲染一次，后面数据的更改不受影响）
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
<h1 v-once>使用v-once的number:{{number}}</h1>
<h2>直接展示number:{{number}}</h2>
<button @click="number++">点击按钮number+1</button>
data() {
return {
number: 1
}
},
v-pre(没有值):
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法：
1.注册过滤器：
Vue.filter(name,callback)或new Vue(filter())
2.使用过滤器：
{{xxx|过滤器名}}或v-bind:属性="xxx|过滤器名"
备注：
1.过滤器也可以接受额外参数，多个过滤器也可以串联
2.过滤器并没有改变原本的数据，是产生新的对应的数据
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.4/dayjs.min.js"></script>
<h2>计算属性当前时间为：{{filTime}}</h2>
<h2>使用methods时间为：{{getformat()}}</h2>
<!--过滤器：将time当作参数传给dateformat -->
<h2>局部过滤器时间：{{time|dateformat}}</h2>
<h2>传递两个参数{{time|dateformat2('YYYY-MM-DD')}}</h2>
<h2>使用默认参数，不传参{{time|dateformat3}}</h2>
<h2>使用默认参数，传参{{time|dateformat3('YYYY-MM-DD')}}</h2>
<!-- 多个过滤器：将time当作参数传给format,然后将结果当作参数传给formatYear -->
<h2>多个过滤器：{{time|dateformat|formatYear}}</h2>
<div :x="time|dateformat">通过v-bind使用,标签会多一个属性x,x的值是当前时间</div>
<!-- 全局过滤器 -->
<h2>全局过滤器时间：{{time|fMTtime}}</h2>
Vue.filter('fMTtime', function (val) {
return dayjs(val).format('YYYY MM DD HH:mm:ss')
})
const vm = new Vue({
el: '#root',
filters: {
//局部过滤器，会将time当作参数传给dateformat
dateformat(val) {
return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
},
dateformat2(val, str) {
return dayjs(val).format(str)
},
dateformat3(val, str = 'YYYY-MM-DD HH:mm:ss') {
return dayjs(val).format(str)
},
formatYear(val) {
return val.slice(0, 4)
}
},
data() {
return {
time: 1652787801974
}
},
computed: {
filTime() {
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
methods: {
getformat() {
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
})
收集表单数据：
若：< input type=”text” />,则 v-model收集的是value值，用户输入的就是value值
若：< input type=”radio” />,则 v-model收集的是value值，且要给标签配置value值
若：< input type=”checkbox” />
1.没有配置Input的value属性：
v-model的初始值是非数组，那么收集的就是checked（勾选或未勾选，是布尔值）
v-model的初始值是数组，那么收集的就是value组成的数组
v-model的三个修饰符：
lazy:失去焦点再收集数据
number：输入字符串转为有效数字，input的type最好同样改为number
trim:输入首位空格过滤
vue监视数据的原理：
vue会监视data中所有层次的数据
如何监测对象中的数据：
通过setter实现监视，且要在new Vue时就传入要监测的数据
对象中后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API：
Vue.set(target.propertyName/index,value)或vm.$set(target.propertyName/index,value)
3.如何监测数组中的数据：
通过包裹数组更新元素的方法实现，本质上就做了两件事：
1.调用原生对应的方法对数组进行更新
2.重新解析模板，进而更新页面
4.在Vue修改数组中的某个元素时一定要用如下方法：
1.使用如下API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()(会改变原数组)
2.使用Vue.set()或vm.$set()
替换数组： filter()、concat()、slice()不会变更原始数组，而是返回一个新的数组，这种情况下可以使用新数组替换就数组
this.student.hobby=this.student.hobby.filter((h)=>{return h!=='xxx})
Vue.set()或vm.$set()不能给vm或者vm的根数据对象添加属性
<div>{{student.name}}-{{student.age}}</div>
<button @click="addSex">添加属性</button>
<div v-if="student.sex"> {{student.sex}}</div>
data() {
return {
student: {
age: 18,
name: '张三'
}
}
},
methods: {
addSex() {
//两种写法都可以给对象添加相应式的属性，不过添加的对象不可以是vue实例对象或其data根对象
// Vue.set(this.student, 'sex', '男')
this.$set(this.student, 'sex', '男')
}
},
v-for指令：
<div id="root">
<ul>
<li v-for="(item,index) in persons" :key="item.id">
{{item.name}}-{{item.age}}
</li>
</ul>
<div v-for="(value,key) in car" :key="index"> {{value}}-{{key}}</div>
<div v-for="(char,index) in teststr" :key="index"> {{char}}-{{index}}</div>
<ul>
<li v-for="(number,index) in 5" :key="index"> {{number}}-{{index}}</li>
</ul>
</div>
data() {
return {
persons: [{
id: 001,
name: '张三',
age: 18
},
{
id: 002,
name: '李四',
age: 19
}, {
id: 003,
name: '王五',
age: 20
}],
car: {
name: '车名',
price: '价格',
color: '颜色'
},
teststr: 'hello'
}
react、vue中key的作用（内部原理）
虚拟DOM中key的作用
2.对比规则：
如果虚拟DOM中内容没变，直接使用之前的真实DOM
如果虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
旧虚拟DOM中未找到与新虚拟DOM相同的key:
创建新的真实DOM，随后渲染到页面
3.用index作为key可能会引发的问题：
1.若对数据进行逆序添加、逆序删除等破坏顺序操作时，会产生没有必要的真实DOM更新，界面效果没问题，但效率低。
2.如果结构中还包含输入类的DOM，则会产生错误的DOM更新，界面会有问题。
开发中如何选择key：
1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表，用于展示，使用index作为key是没有问题的
过滤：
watch实现：
<div id="root">
<input type="text" placeholder="请输入姓名" v-model="keyword">
<ul>
<li v-for="(item,index) in filPerson" :key="item.id"> {{item.name}}-{{item.age}}-{{item.sex}} </li>
</ul>
</div>
data() {
return {
persons: [{
id: 001,
name: '马冬梅',
age: 18,
sex: '女'
},
{
id: 002,
name: '周冬雨',
age: 19,
sex: '女'
}, {
id: 003,
name: '周杰伦',
age: 20,
sex: '男'
}, {
id: 004,
name: '温兆伦',
age: 21,
sex: '男'
}],
filPerson: [],
keyword: ''
}
},
watch: {
keyword: {
immediate: true,//indexof('')===0,所以会返回全部数据
handler(val) {
this.filPerson = this.persons.filter(item => {
return item.name.indexOf(val) !== -1
})
}
}
},
计算属性实现：
<input type="text" placeholder="请输入姓名" v-model="keyword">
<ul>
<li v-for="(item,index) in filPerson" :key="item.id"> {{item.name}}-{{item.age}}-{{item.sex}} </li>
</ul>
data() {
return {
persons: [{
id: 001,
name: '马冬梅',
age: 18,
sex: '女'
},
{
id: 002,
name: '周冬雨',
age: 19,
sex: '女'
}, {
id: 003,
name: '周杰伦',
age: 20,
sex: '男'
}, {
id: 004,
name: '温兆伦',
age: 21,
sex: '男'
}],
keyword: ''
}
},
computed: {
filPerson() {
return this.persons.filter(item => {
return item.name.indexOf(this.keyword) !== -1
})
}
},
排序：
<input type="text" placeholder="请输入姓名" v-model="keyword">
<button @click="type=0">原顺序</button>
<button @click="type=1">升序</button>
<button @click="type=2">降序</button>
<ul>
<li v-for="(item,index) in filPerson" :key="item.id"> {{item.name}}-{{item.age}}-{{item.sex}} </li>
</ul>
data() {
return {
persons: [
{
id: 001,
name: '马冬梅',
age: 19,
sex: '女'
},
{
id: 002,
name: '周冬雨',
age: 18,
sex: '女'
}, {
id: 003,
name: '周杰伦',
age: 20,
sex: '男'
}, {
id: 004,
name: '温兆伦',
age: 17,
sex: '男'
}
],
keyword: '',
type: 0//0原顺序，1升序，2降序
}
},
computed: {
filPerson() {
const arr = this.persons.filter((item) => {
return item.name.indexOf(this.keyword) !== -1
})
if (this.type) {
arr.sort((a, b) => {
return this.type == 1 ? a.age - b.age : b.age - a.age
})
}
return arr
}
},
条件渲染：
2.v-show:
绑定样式：
1.class样式：
写法： ：class=”xxx”,xxx可以是字符串、对象、数组
字符串写法适用于：类型不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于需要绑定多个样式，个数不确定，名字也不确定
2.style样式：
：style=”{fontSize:xxx}”,其中xxx是动态值
: style=”[a,b]”,其中a,b是样式对象
绑定class:
字符串写法：适用于样式的类名不确定，需要动态指定
<div class="box1" :class="activeclass" @click="getclass">盒子</div>
const vm = new Vue({
el: '#root',
data() {
return {
activeclass: ''
}
},
methods: {
getclass() {
this.activeclass = 'box2'
}
},
})
.box1 {
height: 100px;
width: 100px;
background-color: blue;
}
.box2 {
border-radius: 4px;
}
2.数组写法：适用于要绑定的样式个数不确定，名字也不确定
<div class="box1" :class="classarr" @click="getclass">盒子</div>
data() {
return {
classarr: ['class1', 'class2', 'class3']
}
},
.class1{}
.class2{}
.class3{}
3.对象写法：适用于要绑定的样式个数确定，名字也确定，但要动态决定用不用
<div class="box1" :class="classobj" @click="getclass">盒子</div>
data() {
return {
classobj: {
class3: false,
class4: false
}
}
},
.class3{}
.class4{}
style样式：
1.对象写法：
<div :style="{fontSize:fsize+'px'}">gg</div>//font-size这种都需要改成驼峰写法
data() {
return {
fsize: 40,
}
},
}
},
2.数组写法
<div :style="[styleobj,styleobj2]">gg</div>
data() {
return {
styleobj: {
fontSize: '40px'
},
styleobj2: {
color: 'green'
}
}
},
<div :style="stylearr">gg</div>
data() {
return {
stylearr: [{
fontSize: '40px'
}, {
color: 'green'
},]
}
},
监视属性watch:
handler调用时机：监视的属性发生变化时调用
handler(newValue,oldValue):传入两个参数，修改后的值和原来的值
watch监视的属性还有其他配置项，比如：immediate:true，初始化时handler()函数立即执行一次
深度监视：
当监视属性中只用到handler函数而没有其他配置项时，可以简写，有两种简写方式，如下：
computed和watch之间的区别：
两个重要的小原则:
